<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>主页</title>
    <link rel="stylesheet" href="fonts/font_awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="js/mui-swiper/swiper.min.css">
    <link rel="stylesheet" href="js/mui/css/mui.min.css">
    <link rel="stylesheet" href="css/mui-app-style.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
    <h1 class="mui-title"><!--主页--></h1>
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider" >
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="images/banner/yuantiao.jpg">
                </a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/banner/shuijiao.jpg">
                </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/banner/muwu.jpg">
                </a>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/banner/cbd.jpg">
                </a>
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="images/banner/yuantiao.jpg">
                </a>
            </div>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="images/banner/shuijiao.jpg">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>
    <!--product-->
    <div class="product">
        <div class="mui-row mui-text-center">
            <a class=" mui-col-xs" href="pages/mechant/mechant.html">
                <span class="fa fa-edit fa-fw" style="color: #477AC1"></span>
                <span class="mui-tab-label">商户登记</span>
            </a>
            <a class=" mui-col-xs" href="pages/machine/machine.html">
                <span class="fa fa-calculator fa-fw" style="color: #D46F45"></span>
                <span class="mui-tab-label" >机具申领</span>
            </a>
            <a class=" mui-col-xs" href="pages/stickup/stickup.html">
                <span class="fa fa-address-book-o fa-fw" style="color: #7BBA56;"></span>
                <span class="mui-tab-label">商户维护</span>
            </a>

            <a class=" mui-col-xs" href="pages/share/share.html">
                <span class="fa fa-paper-plane fa-fw" style="color: #D46F45"></span>
                <span class="mui-tab-label">业务拓展</span>
            </a>
            <a class=" mui-col-xs" href="pages/activity/activity.html">
                <span class="fa  fa-sign-language fa-fw" style="color: #D46F45"></span>
                <span class="mui-tab-label">活动专区</span>
            </a>
            <a class=" mui-col-xs" href="pages/study/study_group.html">
                <span class="fa fa-book fa-fw" style="color: #7BBA56;"></span>
                <span class="mui-tab-label">学习讲堂</span>
            </a>
            <a class=" mui-col-xs" href="pages/income/myIncome.html">
                <span class="fa fa-dollar fa-fw" style="color: #477AC1"></span>
                <span class="mui-tab-label">我的收益</span>
            </a>
        </div>
    </div>
    <!--业绩-->
    <div style="height: 10px;"></div>
    <div class="performance">
        <div class="ctit">
            <span class="line"></span>
            <label>业绩</label>
        </div>
        <div class="perf__main mui-text-center">
            <div class="">交易额(元)</div>
            <div class="perf__total ">88888.90</div>
            <div class="mui-row">
                <div class="mui-col-xs-5 mui-text-right">今日新增商户 <span id="tTotal">0</span>(个)</div>
                <div class="mui-col-xs-2">|</div>
                <div class="mui-col-xs-5 mui-text-left">本月新增商户 <span id="mTotal">0</span>(个)</div>
            </div>
        </div>
    </div>
    <!--精彩活动-->
    <div style="height: 10px;"></div>
    <div class="performance">
        <div class="ctit">
            <span class="line orange"></span>
            <label>精彩活动</label>
        </div>
        <div class="swiper-s" style="margin:0 16px;">
            <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="pages/activity/activity_detail.html">
                            <img src="images/banner/cbd.jpg" width="200" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="pages/activity/activity_detail.html">
                            <img src="images/banner/muwu.jpg" width="200" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="pages/activity/activity_detail.html">
                            <img src="images/banner/shuijiao.jpg" width="200" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="pages/activity/activity_detail.html">
                            <img src="images/banner/yuantiao.jpg" width="200" alt="">
                        </a>
                    </div>
                </div>
                <!-- Add Pagination -->
                <!--<div class="swiper-pagination"></div>-->
            </div>
        </div>
    </div>
    <!--notice-->
    <div class="notice">
        <div class="mui-row mui-text-center">
            <div class="mui-col-xs-4">
                <span class="fa fa-cny"></span>
                <span class="txt">零风险</span>
            </div>
            <div class="mui-col-xs-4">
                <span class="fa fa-gg-circle"></span>
                <span class="txt">总部签约</span>
            </div>
            <div class="mui-col-xs-4">
                <span class="fa fa-bell"></span>
                <span class="txt">安全保障</span>
            </div>
        </div>
    </div>
    <div style="height: 53px;"></div>
</div>

<script src="js/mui/js/mui.min.js"></script>
<script src="js/common/crypto-js.js"></script>
<script src="js/common/common.js"></script>

<!-- Swiper JS -->
<script src="js/mui-swiper/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        paginationClickable: true,
        spaceBetween: 10
    });
</script>
<script>
    mui.ready(function () {
        createNav(true,0);
        var slider = mui("#slider");
        slider.slider({
            interval: 3000
        });
    })
</script>
</body>
</html>